<template>
<div class="filter-item hn-btn-input-group">
  <el-input clearable size="hn-small" @keyup.enter.native="onSearch" style="width: 260px;" :placeholder="placeholder" v-model="text" v-if="isShowInput" >
  </el-input>
  <slot></slot>
  <el-button-group class="hn-btn-input-group-btn">
    <el-button size="hn-small" type="primary" @click="onSearch">搜索</el-button>
    <el-button size="hn-small" v-if="!isHideReset" @click="onReset">重置</el-button>
  </el-button-group>
  <div class="hn-btn-input-more-btn-box" :class="{'active': isShow}" v-if="isShowMore">
    <span class="hn-btn-input-more-btn" @click="onMore">更多搜索</span>
    <div class="hn-btn-input-more-btn-dropbox">
      <slot name="more"></slot>
      <div style="margin-top: 40px;">
        <el-button size="hn-small" type="primary" @click="onSearch">搜索</el-button>
        <el-button size="hn-small" @click="onMore">关闭</el-button>
      </div>
    </div>
  </div>
</div>
</template>

<script>
export default {
  props: {
    value: {
      type: String,
      default: ''
    },
    placeholder: {
      type: String,
      default: '搜索'
    },
    isShowInput: {
      type: Boolean,
      default: true
    },
    isHideReset: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      isShow: false,
      isShowMore: false,
      text: this.value || ''
    }
  },
  watch: {
    text(val) {
      this.$emit('update:value', val)
    }
  },
  mounted() {
    this.isShowMore = this.$slots.more
  },
  methods: {
    onMore() {
      this.isShow = !this.isShow
    },
    onSearch() {
      this.$emit('onSearch', this.text)
      this.isShow = false
    },
    onReset() {
      this.text = ''
      this.$emit('onReset')
      this.isShow = false
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">
  @import "~@/assets/styles/variables.scss";
  .hn-btn-input-group-btn button {
    margin-bottom: 0 !important;
  }
  .hn-btn-input-more-btn-box {
    height: 30px;
    line-height: 30px;
    position: relative;
    display: inline-block;
    vertical-align: middle;
    &.active {
      .hn-btn-input-more-btn-dropbox {
        display: block;
      }
      .hn-btn-input-more-btn {
        background: #eff7ff;
        border-bottom: 1px solid #eff7ff;
        border-bottom-right-radius: 0;
      }
    }
  }
  .hn-btn-input-more-btn {
    position: relative;
    border-left: 1px solid #4581b4;
    color: #4581b4;
    padding: 0 20px;
    display: block;
    cursor: pointer;
    /*z-index: 4;*/
    border-radius: 0 3px 3px 0;
  }
  .hn-btn-input-more-btn-dropbox {
    position: absolute;
    top: 29px;
    padding: 25px 25px 10px;
    right: -1px;
    width: 524px;
    background: #eff7ff;
    z-index: 2;
    display: none;
    border: 1px solid #4580b4;
    border-radius: 5px 0 5px 5px;
    box-shadow: 0 2px 3px #f0f0f0;
  }
</style>
